<template>
    <div>

        <div class="table-bbb">
            <table>
                <tr v-for="(val,key) in showRes">
                    <td width="100">{{val}}</td>
                    <td>{{key}}</td>
                </tr>
            </table>
            <router-link :to="{path:'/support/shops/shop-detail',query:{'name':showRes['储备库名称']}}">
                <button style="margin:30">
                    查看详情
                </button>
            </router-link>
            <p>当前蓬江总储备点数量为{{ reserve.length}}</p>
        </div>
        <div class="search-wrap search-row">
            <div class="search-div">
                <input placeholder="储备点" v-model="reserveWord" /><van-icon name="search" />
            </div>
            <div class="search-div">
                <input placeholder="物资" v-model="search" /><van-icon name="search" />
            </div>

        </div>

        <div>
            <div class="table-s">
                <table class="table-aaa">
                    <tr>
                        <th width="50" class="num-td">序号</th>
                        <th width="200">储备库名称</th>
                        <th>物资</th>
                    </tr>
                    <tr v-for="(item,index) in resList " @click="activeIndex=index"
                        :class="{'active-row':(index==activeIndex)}">
                        <td class="num-td">{{index+1}}</td>
                        <td class="name-td">{{item['储备库名称']}}</td>
                        <td>
                            <p class="goods-p"><span v-for="(w,i) in item['物资']">{{w['物资名称']}},</span></p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
    //import goodsLogs from "@/tempData/物资总记录.js";
    //import goods from "@/tempData/物资表.js";
    import cList from "@/tempData/物资分类.js";

    import { goodsData, reserve } from '@/tempData/物资.js'
    //import mapOverL from '@/tempData/mapData'  //原始数组

    // import { getRandomColor } from '@/utils/public.js'

    //import geoJson from '@/tempData/geoJson' // 处理后的数据
    function area_concat() {
        var list2 = [];
        var bs_coordinates = []
        mapOverL.map((item, index) => {
            if (!['堤东街道', '仓后街道', '北街街道', '白沙街道'].includes(item.properties.name)) {
                list2.push(item)
            } else {
                bs_coordinates = bs_coordinates.concat(item.geometry.coordinates[0]);
            }
        })
        list2[1].geometry.coordinates[0] = list2[1].geometry.coordinates[0].concat(bs_coordinates);
        return list2
    }

    export default {
        data() {
            return {
                search: "",
                reserve, reserveWord: "", activeIndex: 0

            };
        },
        created() {

        },
        computed: {
            resList() {
                //条件输出
                var list = this.reserve.filter((item) => {
                    let reserveWord = item["储备库名称"].includes(this.reserveWord.trim());

                    let in_search = item["物资"].findIndex((word) => (word['物资名称'].includes(this.search.trim()))) !== -1;

                    return reserveWord && in_search;
                });
                return list;
            },
            showRes() {
                let keys = ['储备库名称', '所在镇街', '储备点联系人', '联系电话'];
                let row = 0;
                let table = []
                let rowArr = [];
                let arr = {};
                for (let k of keys) {
                    arr[k] = this.reserve[this.activeIndex][k];
                    // if (rowArr.length && row % 2 == 0) {
                    //     table.push(rowArr)
                    //     rowArr = [];
                    // }
                    // rowArr.push({ 'label': k, 'val': this.reserve[this.activeIndex][k] })
                    // console.log(rowArr);
                    // row++
                }
                return arr;
            }
        },
        mounted() {


        },
        methods: {
        },
    };
</script>
<style scoped>
   
</style>